
<script setup lang="ts">
import LeftCan from './components/LeftCan.vue';
import Brick from './components/Brick.vue';
import RightCan from './components/RightCan.vue';
import router from './router/router';
const goTo = () =>{
    router.push('/context')
    // window.location.href = '/context'
}
</script>
<template>
    <div class="topBanner">
        <div id="logo">Ciallo～(∠・ω< )⌒★</div>
        <!-- <button @click = 'goTo()'>1</button>
        <button>1</button>
        <button>1</button>
        <button>1</button> -->
    </div>
    <div class="left">
    <LeftCan></LeftCan>
    </div>
    
    <div class="mid">
        <!-- <div class="brick">
        <Brick></Brick>
        </div> -->
        <RouterView></RouterView>
    </div>
    <!-- <div class="right">
        <RightCan></RightCan>
    </div> -->
</template>
<!-- scoped的作用是让各个组件之间的样式不会互相干扰 -->
<style scoped>
#logo{
    margin-left: 20px;
    color: white;
    font-size: 20px;
}
.right{
    margin-top: 10px;
    margin-left: 120px;
    float: left;
    height: 680px;
}
.brick{
    /* display: flex; */
    margin-top: 10px ;
}
.mid{
    float: left;
    margin-left: 30px;
    /* width: 400px; */
}
.left{
    background: url(../public/static/left.png) no-repeat;
    /* background-color: aqua; */
    width: 100px;
    height: 700px;
    float: left;
}

.topBanner{
    align-content: center;
    background: url(../public/static/top.png) no-repeat;
    padding: 2px;
    width: 845px;
    height: 85px;
    /* background-color: aquamarine; */
    /* box-shadow: 3px 5px 5px; */
    /* border-radius: 13px 13px 0px 0px; */
    
}
.topBanner button{
    float: left;
    margin-left: 20px;
    margin-top: 40px;
}
#logo{
    margin-top: 40px;
    float: left;
}
</style>
